import React, { Component } from 'react'
import { SideBar } from 'antd-mobile'
import{getFirstLevelApi}from"@/api/goods"
import MyPubSub from "@/utils/pubsub";
// import style from"./index.module.scss"
export default class Firstlevel extends Component {
    state={
        tabs:[],
        activeKey:"",
       
    }
    componentDidMount(){
        this.getFirstLevelList();
        
    }
    // 获取一级分类
    async getFirstLevelList(){
        let res=await getFirstLevelApi()
        // console.log(res);
        if(res.data.code===200){
          this.setState({
            tabs:res.data.list,
            activeKey:res.data.list[0].id,
          },()=>{
            MyPubSub.publish("transferFirstId",res.data.list[0].id)
          }//此处是调用二级分类使得第二级分类可以在页面刚跳转是就可以被加载
          )
        }
    }
    Changekey=(activekey)=>{
      this.setState({
        activeKey:activekey
      },()=>{
        MyPubSub.publish("transferFirstId",activekey)
      })
      // 如果需确保左侧组件渲染完毕之后，再传id发送请求可以再setstate中的第二个回调函数里调用传递参数函数
      // this.Secondslevel(activekey)
    }
   
  render() {
    // console.log(this.state.activeKey);
    return (
        <SideBar activeKey={String(this.state.activeKey)} onChange={this.Changekey}>
        {this.state.tabs.map((item) => (
          <SideBar.Item key={item.id} title={item.name} />
        ))}
      </SideBar>
    )
  }
}
